<template>
  <a-card title="车辆通行统计">
    <a-range-picker
      @change="change"
      :default-value="[moment(currentDate, dateFormat), moment(currentDate, dateFormat)]"
    />
    <div v-if="showCharts" id="main" style="height: 300px"></div>

    <a-timeline mode="alternate" style="margin-top:30px">
      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询开始时间 :
        {{ this.start }}</a-timeline-item
      >
      <a-timeline-item>
          其中包含: <a-divider type="vertical" />
        <span v-for="item in data" :key="item">
          {{ item.name }}:{{ item.value }}
          <a-divider type="vertical" />
        </span>
      </a-timeline-item>

      <a-timeline-item>
        <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />查询结束时间 :
        {{ this.end }}</a-timeline-item
      >
    </a-timeline>
  </a-card>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'CarinfoCount',
  mixins: [],
  components: {},
  data() {
    this.dateFormat = 'YYYY-MM-DD'
    this.currentDate = moment().format('YYYY-MM-DD')
    return {
      showCharts: false,
      data: [],
      total: [],
      start: '',
      end: '',
    }
  },
  mounted() {
    this.getRecordCout(this.currentDate, this.currentDate)
  },
  computed: {},
  methods: {
    moment,
    change(date, dateStr) {
      this.getRecordCout(dateStr[0], dateStr[1])
    },
    getRecordCout(start, end) {
      this.showCharts = false
      this.start = start + ' 00:00:00'
      this.end = end + ' 23:59:59'
      getAction('/carinfo/carRecord/getCountList', { start: this.start, end: this.end }).then((res) => {
        if (res.success) {
          this.showCharts = true
          this.$nextTick(() => {
            this.data = res.result.data
            this.total = res.result.count
            //console.log(this.data,this.total)
            this.getCharts()
          })
        }
      })
    },

    // 使用柱形图，关于其他配置可以去官网查看
    getCharts() {
      const chartBox = this.$echarts.init(document.getElementById('main'))
      const option = {
        title: { subtext: '总数:' + this.total },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: '来车量',
            type: 'pie',
            center: ['50%', '50%'],

            itemStyle: {
              borderRadius: 8,
            },
            data: this.data,
            label: {
              show: true,

              formatter: '{b}:{c}' + '\r' + '({d}%)',
            },
          },
        ],
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function () {
        chartBox.resize()
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>